<template>
    <el-form :model="form" ref="formRef" :rules="rules" :label-width="labelWidth">
        <slot></slot>
    </el-form>
</template>
<script lang="ts" setup>
    import { ref} from 'vue'
    import { ElMessage } from 'element-plus'
    import type { FormInstance, FormRules } from 'element-plus'

    /**
     * 传入参数
     */
    const props = defineProps({
        form: {
            type: Object,
            required: true
        },
        rules: {
            type: Object,
            required: false
        },
        labelWidth: {
            type: String,
            default: '120px'
        }
    })
    /**
     * 表单引用
     */
    const formRef = ref<FormInstance>();
    /**
     * 重置表单
     */
    const resetForm = () => {
        formRef.value.resetFields();
    }
    /**
     * 参数检验
     */
    const checkParam = () => {
        return new Promise(function (resolve, reject) {
            if (!formRef.value) return reject(formRef.value)
            formRef.value.validate((valid) => {
                if (valid) {
                    resolve(formRef.value)
                } else {
                    ElMessage.error("参数检验不通过，请输入正确的参数！")
                    return reject(formRef.value)
                }
            })
        })
    }
    /**
     * 暴露方法
     */
	defineExpose({
        formRef,
		resetForm,
        checkParam
	})
</script>
<style scoped>
</style>